import React, { useEffect } from 'react'
import request from '@/utils/request'
import * as echarts from 'echarts/core';
import {
    DatasetComponent,
    GridComponent,
    VisualMapComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    DatasetComponent,
    GridComponent,
    VisualMapComponent,
    BarChart,
    CanvasRenderer
]);
function Score() {
    // const TvObj=['American','Britain','China','HongKong']
    var TvObj = {
        "American": "美剧",
        "Britain": "英剧",
        "China": "国产剧",
        "HongKong": "港剧",
        "Japan": "日剧",
        "JapaneseAnimation": "日本动画",
        "SouthKorea": "韩剧",
        "documentary": "纪录片",
        "variety": "综艺"
    }
    const dataKeys = Object.keys(TvObj)
    useEffect(async () => {
        // console.log(dataKeys);
        // var RateData = []
        var RateData = {}
        for (var key of dataKeys) {
            // console.log(key);
            // const name = key
            const { data: { data } } = await request.get('/getRatelist/getRate', {

                params: {
                    // page:page,
                    // pagesize:pagesize,
                    rate: 'rate',
                    collectionName: key
                }

            })
            RateData[key] = data
            // console.log(key)
            // RateData.key=data
            // RateData.push(obj)
        }
        // console.log('RateData', RateData);
        // console.log("data===",data);
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom, 'dark');
        var Rate=[];
        for(var key in RateData){
            // Math.max(...arr)
            // console.log(key);
            // Rate[key]=Math.max(...RateData[key])
            Rate.push([Math.max(...RateData[key]),key])


        }
        // console.log(Rate);
        // Rate.unshift([ 'amount', 'product'])
        myChart.setOption({
            dataset: {
              
                source:Rate
            },
            title: {
                textAlign:'center',
                text: '各个国家电视剧最高评分',
                left:'50%'
            },
            grid: { containLabel: true },
            xAxis: { name: 'Rate' },
            yAxis: { type: 'category' },
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 0,
                max: 10,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        });
    }, [])
    return (
        <>
            <div id="main" style={{ width: 500, height: 400,display:'inline-block',marginRight:100 }}>
                {/* Score */}
            </div>
        </>
    )
}

export default Score;